<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title></title>
</head>

<body>
    <input type="text" id="abc" />
    <!-- <textarea rows="1", cols="30" id="txt">

        </textarea> -->
    <button type="button" id="btn">发表评论</button>
    <ul id="box">
    </ul>
    <script type="text/javascript">
        document.getElementById("btn").onclick = function () {
            var txtx = document.getElementById("abc").value;
            if (txtx.trim() == '') {
                alert('你没有输入内容！');
                return false;
            }
            // “createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
            var li = document.createElement("li");
            box.insertBefore(li, box.firstChild);
            // 几乎所有的元素都有innerHTML属性，它是一个字符串，用来设置或获取位于对象起始和结束标签内的HTML
            li.innerHTML = "<li>" + txtx + "<a href='#' id='a'>删除</a>" + "</li>";
            // li.innerHTML = "<li>" + txtx + "</li>";
            // li.innerHTML = txtx;
            // 是指根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一个。
            document.getElementById("abc").value = '';
            document.getElementById("a").onclick = function () {
                box.removeChild(li);
            }
        }

    </script>
</body>

</html>